<template>
  <HeaderNav/>
  <article>
    <!-- 网站主体 -->
    <div id="main">
      <section class="ct">
        <!-- 上传表单-->
        <div class="upload">
          <h1>用户注册①<em>填写信息、完成用户注册第一步。已有账号，请点击<a href="/login">登录</a></em></h1>
          <!-- 注册步骤导航-->
          <div class="reg_step">
            <a class="step">注册信息</a><a class="step2">基本信息</a><a class="step2">注册完成</a>
          </div>

          <form>
            <p>
              <label>手机号：</label>
              <input class="upt" type="text" name="tel" v-model="user.tel"/>
            </p>
            <p>
              <label>密码：</label>
              <input class="upt" type="password" name="password" v-model="user.password" placeholder="密码长度为6-20位"/>
            </p>
            <p>
              <label>确认密码：</label>
              <input class="upt" type="password" v-model="password" placeholder="请再次输入密码"/>
              <span class="source-tag-msg">两次输入的密码必须保持一致</span>
            </p>

            <p>
              <label>电子邮箱：</label>
              <input id="email" class="upt" type="text" name="email" v-model="user.email" placeholder="请输入邮箱"/>
              <span class="source-tag-msg">您丢失密码后找回密码的凭证</span>
            </p>

            <p><a class="btn" @click="handlerRegister">注册</a></p>
          </form>
        </div>
      </section>
    </div>
  </article>
  <Footer/>
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";

export default {
  components: {
    HeaderNav,
    Footer,
  },
  data() {
    return {
      user: {
        tel: "",
        password: "",
        email: "",
      },
      password: "",
    }
  },
  methods: {
    handlerRegister() {
      if (this.user.password != this.password) {
        this.$toastr.error("两次输入的密码不一致");
        return ;
      }
      this.$api.registOne({...this.user, ...this.$route.query}).then(ret => {
        if (ret.status) {
          // 跳转到第二步
          this.$router.push({name: "next", query: {uid: ret.data.uid, sign: ret.data.sign}})
        } else {
          for (let err in ret.error) {
            this.$toastr.error(ret.error[err]);
          }
          this.$toastr.error(ret.message);
        }
      })
    }
  }
}
</script>

<style>
</style>